import React from 'react';
import { Form, DatePicker, Radio, Input, Select, Alert, Row, Col, message, Tabs } from 'antd';
import moment from 'moment';
import styles from './styles.less';
const { TextArea } = Input;
const { Option } = Select;

export default class Index extends React.Component<any, any> {
  state = {
    unit: null,
    scale: '4',
    clientHeight: 200,
  };
  componentDidMount() {
    let height = document.body.clientHeight;
    this.setState({
      clientHeight: Number(height) * 0.7,
    });
  }
  handleSelect = (value: any) => {
    this.setState({
      unit: value,
    });
  };
  handleSubmit = () => {
    const { close, submit, view } = this.props;
    this.props.form.validateFields((err: any, values: any) => {
      if (!err) {
        if (values.type == 0 && Number(values.companyPrice) <= Number(values.staffPrice)) {
          message.error('公司核定买入价不能低于员工买入价');
        } else if (
          values.type == 1 &&
          Number(values.companySalePrice) <= Number(values.companyPrice)
        ) {
          message.error('公司核定销售价不能低于公司核定买入价');
        } else {
          close && close();
          const data = {
            ...values,
            dealTime: new Date(values.dealTime).getTime(),
            companyPrice: Number(values.companyPrice),
            companyProfitProportion: Number(values.companyProfitProportion),
            companySalePrice: Number(values.companySalePrice),
            freight: Number(values.freight),
            quantity: Number(values.quantity),
            staffId: Number(values.staffId),
            staffPrice: Number(values.staffPrice),
            wineId: Number(values.wineId),
          };
          submit && submit(view, data);
        }
      }
    });
  };

  render() {
    const { getFieldDecorator, getFieldsValue, getFieldValue } = this.props.form;
    const { personData, commodityData, hourseData, utilsData, ishourse } = this.props;
    const { clientHeight } = this.state;
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 16 },
    };
    console.log(utilsData, getFieldsValue(), 4444);
    // const quantityComments = getFieldValue('quantityComments');
    const selectAfter = getFieldDecorator('quantityUnitId')(
      <Select onChange={this.handleSelect} style={{ width: 95 }}>
        {utilsData.map((item: any, index: number) => {
          return (
            <Option value={item.value} key={item.value}>
              {item.label}
            </Option>
          );
        })}
      </Select>,
    );

    const Desc = (
      <Row style={{ fontSize: '14px' }}>
        <Col span={2}>
          <span style={{ whiteSpace: 'nowrap' }}>备注说明：</span>
        </Col>
        <Col span={22}>
          <div>
            <span style={{ color: 'red' }}>*售出时利润计算公式:</span>
            <span>(公司核定销售价-公司核定买入价)× 数量 × 利润分成比</span>
          </div>
          <div>
            <span style={{ color: 'red' }}>*利润分成比:</span>
            <span>例,4:6 是指公司利润占总利润的40%，个人利润占总利润的60% </span>
          </div>
        </Col>
      </Row>
    );
    const typeValue = this.props.form.getFieldValue('type');
    // console.log(this.props.form.getFieldValue('staffId'));
    return (
      <div
        className={styles.soldcontain}
        style={{ height: `${clientHeight}px`, overflowY: 'scroll' }}
      >
        <Alert message={Desc} type="info" style={{ marginBottom: '22px' }} />

        <Form {...formItemLayout} onSubmit={this.handleSubmit}>
          <Row>
            <Col span={12}>
              <Form.Item label="订单类型">
                {getFieldDecorator('type', {
                  rules: [{ required: true, message: '请选择订单类型' }],
                })(
                  <Select>
                    <Option value="0">买入</Option>
                    <Option value="1">售出</Option>
                  </Select>,
                )}
              </Form.Item>
              <Form.Item label={'人员'}>
                {getFieldDecorator('staffId', {
                  rules: [{ required: true, message: '请输入工作人员' }],
                })(
                  <Select
                    showSearch
                    placeholder="请输入工作人员"
                    filterOption={false}
                    onSearch={(value: any) => {
                      this.props.dispatch({
                        type: 'order/soldSearch',
                        payload: { comments: value },
                      });
                    }}
                    onChange={() => {}}
                  >
                    {personData.length > 0
                      ? personData.map((item: any) => (
                          <Option value={item.id} key={item.key}>
                            {item.name} （{item.phoneNumber}）
                          </Option>
                        ))
                      : null}
                  </Select>,
                )}
              </Form.Item>
              <Form.Item label={'商品名'}>
                {getFieldDecorator('wineId', {
                  rules: [{ required: true, message: '请输入商品' }],
                })(
                  <Select
                    showSearch
                    placeholder="请输入商品"
                    filterOption={false}
                    onSearch={(value: any) => {
                      this.props.dispatch({
                        type: 'order/commoditySearch',
                        payload: { comments: value },
                      });
                    }}
                    onChange={val => {
                      this.props.dispatch({
                        type: 'order/instockSpec',
                        payload: {
                          id: val,
                        },
                      });
                    }}
                  >
                    {commodityData.length > 0
                      ? commodityData.map((item: any) => (
                          <Option value={item.id} key={item.id}>
                            {item.name}（{item.comments}）
                          </Option>
                        ))
                      : null}
                  </Select>,
                )}
              </Form.Item>
              <Form.Item label={'仓库'}>
                {getFieldDecorator('wareHouseCode', {
                  rules: [{ required: true, message: '请选择仓库' }],
                })(
                  <Select
                    showSearch
                    placeholder="请选择仓库"
                    filterOption={false}
                    onChange={() => {}}
                    disabled={ishourse}
                  >
                    {hourseData.length > 0
                      ? hourseData.map((item: any) => (
                          <Option value={item.value}>{item.label}</Option>
                        ))
                      : null}
                  </Select>,
                )}
              </Form.Item>
              <Form.Item label={'公司核定买入价'}>
                {getFieldDecorator('companyPrice', {
                  rules: [
                    {
                      required: true,
                      pattern: /^[1-9]\d*$/,
                      message: '请输入正确的商品核定买入价',
                    },
                  ],
                })(<Input prefix="￥" suffix="RMB" placeholder="请输入正确的商品核定买入价" />)}
              </Form.Item>
              {typeValue == '1' ? (
                <Form.Item label={'公司核定销售价'}>
                  {getFieldDecorator('companySalePrice', {
                    rules: [
                      {
                        required: true,
                        pattern: /^[1-9]\d*$/,
                        message: '请输入正确的公司核定销售价',
                      },
                    ],
                  })(<Input prefix="￥" suffix="RMB" placeholder="请输入正确的公司核定销售价" />)}
                </Form.Item>
              ) : null}
              {typeValue === '0' ? (
                <Form.Item label={'员工买入单价'}>
                  {getFieldDecorator('staffPrice', {
                    rules: [
                      {
                        required: true,
                        pattern: /^[1-9]\d*$/,
                        message: '请输入正确的商品购入单价',
                      },
                    ],
                  })(<Input prefix="￥" suffix="RMB" placeholder="请输入商品购入单价" />)}
                </Form.Item>
              ) : null}
              <Form.Item label={'数量'}>
                {getFieldDecorator('quantity', {
                  rules: [{ required: true, pattern: /^[1-9]\d*$/, message: '请输入正确的数量' }],
                })(<Input placeholder="请输入数量" addonAfter={selectAfter} />)}
              </Form.Item>
              <Form.Item label={'运费'}>
                {getFieldDecorator('freight', {
                  rules: [{ pattern: /(^[1-9]\d*$)|0/, message: '请输入正确的运费' }],
                })(<Input prefix="￥" suffix="RMB" placeholder="请输入运费" />)}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label={'其它费用'}>
                {getFieldDecorator('otherFee', {
                  rules: [{ pattern: /(^[1-9]\d*$)|0/, message: '请输入正确的费用' }],
                })(<Input prefix="￥" suffix="RMB" placeholder="请输入其它费用" />)}
              </Form.Item>
              <Form.Item label={'其它费用备注'}>
                {getFieldDecorator('otherFeeComments')(
                  <TextArea rows={2} placeholder="请输入其它费用备注" />,
                )}
              </Form.Item>
              <Form.Item label={'利润分成比'}>
                {getFieldDecorator('companyProfitProportion', {
                  rules: [{ required: true }],
                })(
                  <Select>
                    <Option value="0.4">4:6</Option>
                    <Option value="0.5">5:5</Option>
                    <Option value="0.6">6:4</Option>
                  </Select>,
                )}
              </Form.Item>
              <Form.Item label={'成交时间'}>
                {getFieldDecorator('dealTime', {
                  rules: [{ required: true, message: '请选择成交时间' }],
                })(<DatePicker onChange={() => {}} />)}
              </Form.Item>
              {/* <Form.Item label={'是否结算'}>
                {getFieldDecorator('orderStatusEnum')(
                  <Radio.Group>
                    <Radio value={'SETTLED'}>是</Radio>
                    <Radio value={'PENDING'}>否</Radio>
                  </Radio.Group>,
                )}
              </Form.Item> */}
              <Form.Item label={'备注'}>
                {getFieldDecorator('comments', {})(<TextArea rows={4} />)}
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </div>
    );
  }
}
